<template>
    <ToolbarItemContainer :iconFile="orderIcon" :iconWidth="isUniFrameWork ? '26px' : '20px'"
        :iconHeight="isUniFrameWork ? '26px' : '20px'" @onDialogShow="getOrderList" ref="container"
        @onDialogClose="closeDialog">
        <div class="order-box">

            <div class="order-header">
                {{ $t("Order.orderList") }}
                <el-form @keyup.enter="getOrderList">
                    <el-form-item>
                        <el-input v-model="searchWord" class="w-50 m-2" :placeholder="$t('Order.inputOrderNumber')"
                            prefix-icon="Search" />
                    </el-form-item>
                </el-form>
            </div>

            <div class="order-list">
                <div class="order-item" v-for="item in orderList" :key="item.id">
                    <div class="order-item-top">
                        <div>
                            {{ $t("Order.OrderId") }} ：{{ item.id }}
                        </div>
                        <div>
                            {{ item.createTime }}
                        </div>
                    </div>
                    <div class="order-item-bottom" v-for="prod in item.orderItemList" :key="prod.id">

                        <div class="order-item-img">
                            <el-image style="width: 80px;height: 80px; border-radius: 8px;" :src="$getFileUri(prod.pic)"
                                alt="" />
                        </div>
                        <div class="order-item-info">
                            <div class="order--item-title">
                                {{ prod.prodName }}
                            </div>
                            <div class="t-gray">
                                {{ prod.properties }}
                            </div>
                            <div class="t-gray">
                                x{{ prod.num }}
                            </div>
                        </div>
                        <div class="send-box">
                            <div class="price">
                                {{ $amountFormat(prod.amount) }}
                            </div>
                        </div>
                    </div>
                    <div class="amount-box">
                        <div class="order-amount">
                            <div class="amount-label">{{ $t('Order.orderAmount') }}</div>
                            <div class="amount-value orderAmount">{{ $amountFormat(item.orderAmount) }}</div>
                        </div>
                        <div class="order-amount" v-if="Number(item.reduceAmount)">
                            <div class="amount-label">{{ $t("Order.reduceAmount") }}</div>
                            <div class="amount-value reduceAmount">-{{ $amountFormat(item.reduceAmount) }}</div>
                        </div>
                        <div class="order-amount">
                            <div class="amount-label">{{ $t("Order.actualAmount") }}</div>
                            <div class="amount-value actualAmount">{{ $amountFormat(item.actualAmount) }}</div>
                        </div>

                    </div>
                    <div style="display: flex; margin-top: 10px;">
                        <OrderStateTag :state="item.state"></OrderStateTag>
                        <el-button @click="sendMesssage(item)" style="margin-left:auto;">
                            {{ $t("Order.send") }}
                        </el-button>
                    </div>

                </div>

                <el-empty v-if="orderList.length == 0" :description="$t('common.noData')" />

            </div>
        </div>
    </ToolbarItemContainer>
</template>
<script lang="ts" setup>
import {
    TUIStore,
    StoreName,
    IConversationModel,
} from "@tencentcloud/chat-uikit-engine";
import orderIcon from "../../../../assets/icon/orders.svg";
import ToolbarItemContainer from "../toolbar-item-container/index.vue";
import { isPC, isUniFrameWork } from "../../../../utils/env";
import { getList } from "/@/api/bizs/Order"
import { IOrderItem } from "./types/index"
import {
    TUIChatService,
} from "@tencentcloud/chat-uikit-engine";
import { useMessage } from "/@/hooks/message";

import OrderStateTag from "/@/components/biz/orderStateTag.vue"
const container = ref()
const searchWord = ref("")
const currentConversation = ref<IConversationModel>();

TUIStore.watch(StoreName.CONV, {
    currentConversation: (conversation: IConversationModel) => {
        currentConversation.value = conversation;


    },
});

// 关闭dialog
const closeDialog = () => {
    searchWord.value = ""
}
const orderList = ref<IOrderItem[]>([])
const getOrderList = async () => {
    let res = await getList({
        uid: currentConversation.value!.userProfile.userID,
        search: searchWord.value
    })
    orderList.value = res.data
}

// 发送消息
const sendMesssage = (row: IOrderItem) => {
    let promise = TUIChatService.sendCustomMessage({
        payload: {
            data: JSON.stringify({
                // 订单类消息标识字段
                businessID: "order",
                ...row
            }),
            description: "",
            extension: ""
        }

    })

    container.value.toggleDialogDisplay(false)
    promise.catch(err => {
        useMessage().error("登录超时，请重新刷新页面或重新登陆")
    })

}

</script>
<style lang="scss" scoped>
.order-box {
    max-width: 800px;
    min-width: 500px;
    padding: 10px;
    position: relative;
    background-color: #f7f7f7;

    .order-list {
        margin-top: 10px;
        overflow: auto;
        max-height: 500px;

        .order-item {
            background-color: #fff;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;

            &-top {
                display: flex;
                justify-content: space-between;
            }

            &-bottom {
                display: flex;
                gap: 10px;
                margin-top: 5px;

                .order-item-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-bottom: 10px;
                    width: 0;

                    .order--item-title {
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .t-gray {
                        color: gray;
                    }
                }

                .send-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    flex-direction: column;

                    .price {
                        font-weight: 700;
                        font-size: 16px;
                    }
                }
            }


            .amount-box {
                display: flex;
                flex-direction: column;
                gap: 5px;

                .order-amount {
                    display: flex;
                    justify-content: space-between;
                }

                .orderAmount {
                    font-size: 16px;
                    font-weight: 700;
                }

                .reduceAmount {
                    color: red;
                    font-weight: 700;
                    font-size: 16px;
                }

                .actualAmount {
                    font-size: 16px;
                    font-weight: 700;
                    color: orange;
                }
            }
        }


    }
}

:deep(.el-input) {
    margin: 0;
}
</style>
